<template>
  <div class="fan_container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>粉丝管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div id="main" style="width: 100%; height: 500px" ref="main"></div>
      <!-- <my-map></my-map> -->
    </el-card>
  </div>
</template>

<script>
// import MyMap from "./components/MyMap.vue"
import { getArticleChannels } from "@/request/api.js";
export default {
  name: "MyFans",
  data() {
    return {
      myChart: null,
      channels: [],
    };
  },
  created() {
    this.initChannels();
  },
  components: {
    // MyMap
  },
  methods: {
    initChannels() {
      getArticleChannels().then((res) => {
        let arr = [];
        res.data.data.channels.forEach((item) => {
          arr.push(item.name);
        });

        this.channels = arr;
        console.log("频道==》", res.data.data.channels);
      });
    },
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = this.$echarts.init(this.$refs.main);

    // 指定图表的配置项和数据
    let option = {
      title: {
        text: "开发者频道",
        // subtext: "Fake Data",
        left: "center",
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      legend: {
        bottom: 10,
        left: "center",
        data: this.channels,
      },
      series: [
        {
          type: "pie",
          radius: "65%",
          center: ["50%", "50%"],
          selectedMode: "single",
          data: [
            {
              value: 1548,
              name: "开发者咨询",
            },
            { value: 735, name: "ios" },
            { value: 510, name: "c++" },
            { value: 434, name: "android" },
            { value: 335, name: "数据库" },
            { value: 1000, name: "区块链" },
            { value: 102, name: "go" },
            { value: 52, name: "产品" },
            { value: 1059, name: "linux" },
            { value: 900, name: "人工智能" },
            { value: 46, name: "php" },
            { value: 159, name: "javascript" },
            { value: 33, name: "架构" },
            { value: 666, name: "python" },
            { value: 780, name: "java" },
            { value: 481, name: "面试" },
            { value: 30, name: "科技动态" },
            { value: 482, name: "js" },
            { value: 399, name: "设计" },
            { value: 100, name: "数码产品" },
            { value: 312, name: "html" },
            { value: 335, name: "软件测试" },
            { value: 500, name: "测试开发" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],



      color:["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#fc8452","#9a60b4"
      ,"#f7455c"
      ,"#ffcd00"
      ,"#00843d"
      ,"#64ccc9"
      ,"#672146"
      ,"#3e2b2e"
      ,"#333f48"
      ,"#db3eb1"
      ,"#78be20"
      ,"#9e62be"
      ,"#53caec"
      ,"#f9e1b7"
      ,"#67517c"
      ,"#ffe52b"
      ,"#8fcb24"
      ,"#00cdc2"
      ,"#3f5ea9"
      ,"#674da1"
      ,"#f8a6de"
      ,"#ea7ccc"
      ] 
 
    };

    // 使用刚指定的配置项和数据显示图表。
    this.myChart.setOption(option);
  },
};
</script>

<style>
</style>